<template>
  <div class="dashboard">
    <!-- 欢迎标题 -->
    <div class="welcome-section">
      <h1 class="welcome-title">欢迎使用学生信息管理系统</h1>
    </div>


    <!-- 统计数据卡片 - 已屏蔽 -->
    <!-- <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">
              <el-skeleton v-if="loading" :rows="1" animated />
              <span v-else>{{ statistics.studentCount }}</span>
            </div>
            <div class="stat-label">学生总数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><UserFilled /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">
              <el-skeleton v-if="loading" :rows="1" animated />
              <span v-else>{{ statistics.teacherCount }}</span>
            </div>
            <div class="stat-label">教师总数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Reading /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">
              <el-skeleton v-if="loading" :rows="1" animated />
              <span v-else>{{ statistics.courseCount }}</span>
            </div>
            <div class="stat-label">课程总数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><ClipboardList /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">
              <el-skeleton v-if="loading" :rows="1" animated />
              <span v-else>{{ statistics.enrollmentCount }}</span>
            </div>
            <div class="stat-label">选课总数</div>
          </div>
        </div>
      </div>
    </div> -->

    <!-- 快速操作区域 -->
    <div class="actions-section">
      <h2 class="section-title">快速操作</h2>
      <div class="actions-grid">
        <div class="action-card" @click="handleQuickAction('student')">
          <div class="action-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="action-title">新增学生</div>
        </div>
        <div class="action-card" @click="handleQuickAction('teacher')">
          <div class="action-icon">
            <el-icon><UserFilled /></el-icon>
          </div>
          <div class="action-title">新增教师</div>
        </div>
        <div class="action-card" @click="handleQuickAction('course')">
          <div class="action-icon">
            <el-icon><Reading /></el-icon>
          </div>
          <div class="action-title">新增课程</div>
        </div>
        <div class="action-card" @click="handleQuickAction('grade')">
          <div class="action-icon">
            <el-icon><Document /></el-icon>
          </div>
          <div class="action-title">成绩录入</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  User,
  UserFilled,
  Reading,
  Document
} from '@element-plus/icons-vue'
// import { getStatistics } from '@/api/statistics' // 已屏蔽统计数据功能

export default {
  name: 'Dashboard',
  components: {
    User,
    UserFilled,
    Reading,
    Document
  },
  setup() {
    const router = useRouter()
    
    // 统计数据 - 已屏蔽
    // const statistics = ref({
    //   studentCount: 0,
    //   teacherCount: 0,
    //   courseCount: 0,
    //   enrollmentCount: 0
    // })
    
    // 加载状态 - 已屏蔽
    // const loading = ref(true)

    // 获取统计数据 - 已屏蔽
    // const fetchStatistics = async () => {
    //   try {
    //     loading.value = true
    //     const response = await getStatistics()
    //     if (response.code === 200) {
    //       statistics.value = response.data
    //     } else {
    //       ElMessage.error('获取统计数据失败')
    //     }
    //   } catch (error) {
    //     console.error('获取统计数据失败:', error)
    //     ElMessage.error('获取统计数据失败，请检查网络连接')
    //   } finally {
    //     loading.value = false
    //   }
    // }

    // 快速操作处理
    const handleQuickAction = (action) => {
      const actionMap = {
        student: '/student-management',
        teacher: '/teacher-management',
        course: '/course-management',
        grade: '/grade-management'
      }
      
      const path = actionMap[action]
      if (path) {
        router.push(path)
      } else {
        ElMessage.info('功能开发中...')
      }
    }

    // 组件挂载时获取数据 - 已屏蔽
    // onMounted(() => {
    //   fetchStatistics()
    // })

    return {
      // statistics, // 已屏蔽
      // loading, // 已屏蔽
      handleQuickAction
      // fetchStatistics // 已屏蔽
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  .welcome-section {
    text-align: center;
    margin-bottom: 40px;
    
    .welcome-title {
      font-size: 32px;
      font-weight: 600;
      color: #303133;
      margin: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }
  
  
  .stats-section {
    margin-bottom: 40px;
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      
      .stat-card {
        background: white;
        border-radius: 12px;
        padding: 40px 32px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        gap: 20px;
        transition: all 0.3s ease;
        min-height: 120px;
        
        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }
        
        .stat-icon {
          width: 80px;
          height: 80px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32px;
          color: white;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .stat-content {
          .stat-number {
            font-size: 36px;
            font-weight: 700;
            color: #303133;
            margin-bottom: 8px;
          }
          
          .stat-label {
            font-size: 16px;
            color: #909399;
            font-weight: 500;
          }
        }
      }
    }
  }
  
  .actions-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .section-title {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 32px;
      text-align: center;
    }
    
    .actions-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      width: 90%;
      max-width: 1000px;
      
      .action-card {
        background: white;
        border-radius: 16px;
        padding: 40px 24px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        transition: all 0.3s ease;
        min-height: 160px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        &:hover {
          transform: translateY(-6px);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }
        
        .action-icon {
          width: 70px;
          height: 70px;
          border-radius: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          color: white;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          margin-bottom: 16px;
        }
        
        .action-title {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          line-height: 1.4;
        }
      }
    }
  }
}

// 响应式设计
@media (min-width: 1400px) {
  .dashboard {
    .actions-section {
      .actions-grid {
        width: 95%;
        max-width: 1200px;
        gap: 20px;
        
        .action-card {
          padding: 48px 32px;
          min-height: 180px;
          
          .action-icon {
            width: 80px;
            height: 80px;
            font-size: 32px;
            margin-bottom: 20px;
          }
          
          .action-title {
            font-size: 18px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .dashboard {
    .welcome-section {
      .welcome-title {
        font-size: 24px;
      }
    }
    
    
    .stats-section {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        
        .stat-card {
          padding: 32px 24px;
          min-height: 100px;
          
          .stat-icon {
            width: 70px;
            height: 70px;
            font-size: 28px;
          }
          
          .stat-content {
            .stat-number {
              font-size: 30px;
            }
            
            .stat-label {
              font-size: 14px;
            }
          }
        }
      }
    }
    
    .actions-section {
      .actions-grid {
        width: 95%;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        
        .action-card {
          padding: 32px 20px;
          min-height: 140px;
          
          .action-icon {
            width: 60px;
            height: 60px;
            font-size: 24px;
            margin-bottom: 12px;
          }
          
          .action-title {
            font-size: 15px;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .dashboard {
    .stats-section {
      .stats-grid {
        grid-template-columns: 1fr;
      }
    }
    
    .actions-section {
      .actions-grid {
        width: 90%;
        grid-template-columns: 1fr;
        gap: 12px;
        
        .action-card {
          padding: 28px 20px;
          min-height: 120px;
          
          .action-icon {
            width: 50px;
            height: 50px;
            font-size: 20px;
            margin-bottom: 10px;
          }
          
          .action-title {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>